<template>
   <!-- 主体区域 -->
   <section id="app">
      <!-- 输入框 -->

      <TodoHeader @add="add"></TodoHeader>
      <!-- 列表区域 -->
      <TodoBady :list="list" @del="ButtenDel"></TodoBady>

      <!-- 统计和清空 -->
      <TodoFoot :list="list" @claer="clearAdd"></TodoFoot>
   </section>
</template>

<script>
import TodoBady from './components/TodoBady.vue';
import TodoFoot from './components/TodoFoot.vue';
import TodoHeader from './components/TodoHeader.vue';
export default {
   data() {
      return {
         list: JSON.parse(localStorage.getItem('list')) || [
            { id: 1, name: 'basekataball' },
            { id: 2, name: 'football' },
            { id: 3, name: 'pinpang' }
         ]
      }
   },
   components: {
      TodoBady,
      TodoFoot,
      TodoHeader
   },
   methods: {
      add(todoName) {
         this.list.unshift({
            id: +new Date(),

            name: todoName
         })
      },
      ButtenDel(id) {
         this.list = this.list.filter(item => item.id !== id)
      },
      clearAdd(){
         this.list = []
      },
   },
   watch:{
         list:{
            deep:true,
            handler(newValue){
               localStorage.setItem('list',JSON.stringify(newValue))
            }
         }
      }
}
</script>

<style></style>